<template>
  <div style="padding-right: 30px;padding-top:30px">
    <el-form :rules="rules" :model="ruleForm" label-width="100px" ref="ruleForm" label-position="left">
      <el-form-item label="配送线路名称" prop="name">
        <el-autocomplete
          clearable
          style="width:100%"
          class="inline-input"
          v-model="ruleForm.name"
          :fetch-suggestions="querySearch"
          placeholder="请输入线路名称"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="默认车辆" prop="vehicleCode">
        <el-select v-model="ruleForm.vehicleCode" filterable placeholder="点击或输入选择" style="width:100%" clearable>
          <el-option
            v-for="item in options"
            :key="item.code"
            :label="item.licenseNumber"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="ruleForm.description" clearable placeholder="请输入描述内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="funcSubmit">立即处理</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {editShipmentLine} from "@/api/shipment";
  import request from '@/utils/request'
  export default {
    name: "Edit",
    data() {
      return {
        ruleForm: {
          code: '',
          description: '',
          vehicleCode: '',
          name: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入线路名称', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ]
        },
        options: [],
        value: '',
        restaurants: [{
          value: '兰山',
        }, {
          value: '南方',
        }, {
          value: '北京',
        }],
      };
    },
    created() {
      this.getVehicleList();
    },
    methods: {
      getVehicleList() {
        request({url: `/ntocc-basic-api/vehicle/list`, method: 'get'}).then(response => {
          this.options = response.data
        })
      },
      getInfo(code) {
        request({url: `/ntocc-basic-api/shipmentLine/${code}`, method: 'get'}).then(response => {
          this.ruleForm = response.data
        })
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      funcSubmit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            const rLoading = this.openLoading();
            editShipmentLine(this.ruleForm).then(response => {
              rLoading.close();
              this.$message({message: response.msg, type: 'success'})
              this.$emit('hideModel')
            })
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
</script>
